<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
    @font-face {
        font-family: 'KeepRunning';
        src: url('/Public/keeprunning/font/YSBangBang.ttf');
    }
html, body{
    min-height: 100%; width: 100%; padding: 0;
    font-family: 'KeepRunning';
}
body{
    background: url('/Public/keeprunning/common/rstar_background.jpg') center no-repeat;
    background-size: cover; 
}
.r-title {
    width: 100%; height: 100px; display: flex; padding: 5vh 0 1vh;
    align-items: center; justify-content: center;
}
.r-title img {
    width:75%; 
}
.r-time{
    width: 88%; display: flex; align-items: end; justify-content: end;color: #fff;
    margin-bottom: 1vh;;
}
.r-rank{
    display: flex; flex-direction: column; gap: 1vh;
    align-items: center; justify-content: center;
    margin-bottom: 5vh; 
}
.r-rank-item{
    width: 75vw; display: flex; flex-direction: row; padding-left: 2vw; gap: 2vw;
    align-items: center; border-radius: 1rem;
    height: 10vh;
}
.r-rank-item-rank{
    width: 12%; height: 5vh; display: flex; align-items: center; justify-content: center;
    font-size: 3vh; flex: 0 0 auto; 
}
.rank-text{
    color: #fff; font-weight: bold;
}
.r-rank-item-rank img{
    width: 100%; height: 100%; object-fit: contain;
}
.r-rank-item-avatar{
    width: 25%; height: 100%; margin-top: 1vh;align-items: center; justify-content: center;flex: 0 0 auto;
}
.r-rank-item-avatar img{
    width: 100%; height: 100%; object-fit: contain;
}
.r-rank-item-detail{
    flex: 1; color: white; margin-right: 6vw;
}
.r-rank-item-detail-name, .r-rank-item-detail-support{
    display: flex; align-items: center; justify-content: center;
}
.r-rank-item-detail-name{
    font-size: 2.4vh; height: 3vh; margin-bottom: 0.5vh;;
}
.r-rank-item-detail-support{
    font-size: 3.6vh;height: 3.6vh;
}
.r-footer{
    padding: 2vh; display: flex; align-items: center; justify-content: center;
}
.r-footer img{
    width: 60%; object-fit: contain;
}
.r-fix{
    position: fixed; bottom: 2vh; width: 100%;
    display: flex; align-items: center; justify-content: center;
}
.r-fix button{
    width: 60vw; height: 15vw; padding-bottom: 2vw; border: none; 
    background: url('/Public/keeprunning/common/goto_button.png') center no-repeat;
    background-size: contain; transition-duration: 0.2s;
    font-size: 3vh; line-height: 1; color: #fff;
}
.r-fix button:active{
    transform: scale(0.8);
}
</style>
</head>

<body>
<div class="container">
    <div class="page flex">
        <div class="r-title weui-flex">
            <img src="/Public/keeprunning/common/logo_title.png">
        </div>
        <div class="r-time">
            <span id="r-time" data-expire-time="{$time.expire_time_stamp}">刷新排行榜。。。</span>
        </div>
        <div class="r-rank">
            <volist name="rank_list" id="vo">
                <div class="r-rank-item" style="background-color: #{$vo.idol.color}C0;">
                    <div class="r-rank-item-rank">
                        <if condition="$vo.rank eq 1">
                            <img src="/Public/keeprunning/common/rank_1.png">
                        </if>
                        <if condition="$vo.rank eq 2">
                            <img src="/Public/keeprunning/common/rank_2.png">
                        </if>
                        <if condition="$vo.rank eq 3">
                            <img src="/Public/keeprunning/common/rank_3.png">
                        </if>
                        <if condition="$vo.rank gt 3">
                            <span class="rank-text" style="-webkit-text-stroke: 0.5px #{$vo.idol.borderColor};">{$vo.rank}</span>
                        </if>
                    </div>
                    <div class="r-rank-item-avatar">
                        <img src="/Public/keeprunning/idol/{$vo.idol.id}.png">
                    </div>
                    <div class="r-rank-item-detail">
                        <div class="r-rank-item-detail-name" style="-webkit-text-stroke: 0.5px #{$vo.idol.borderColor};">{$vo.idol.name}</div>
                        <div class="r-rank-item-detail-support">{$vo.support}</div>
                    </div>
                </div>
            </volist>
        </div>
        <div class="r-footer">
            <img src="/Public/keeprunning/common/z_logo.png">
        </div>
        <div class="r-fix">
            <button id="goto-btn">前往助力</button>
        </div>
    </div>
</div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
setInterval(() => {
    const expireTime = document.querySelector('#r-time').dataset.expireTime;
    const currentTime = Math.floor(Date.now() / 1000);
    const timeLeft = expireTime - currentTime;
    const timeLeftString = `本期排行榜倒计时：${Math.floor(timeLeft / 86400)}天${Math.floor(timeLeft / 3600) % 24}小时${Math.floor(timeLeft / 60) % 60}分${timeLeft % 60}秒`;
    document.querySelector('#r-time').textContent = timeLeftString;
}, 1000);
setTimeout(() => {
    window.location.reload();
}, 300 * 1000);
document.querySelector('#goto-btn').addEventListener('click', () => {
    wx.navigateToMiniProgram({
        appId: 'wx8420ab23c390fc12',
        path: 'page/index/index',
        extraData: {
            foo: 'bar'
        },
        envVersion: 'develop',
        success(res) {
            // 打开成功
        }
        })
});
</script>
</html>